import React, { useState, useEffect } from 'react'
import { Card, Button, Table, message, Modal, Form, Input, Select } from "antd"
import {findAllUser,addUserApi} from "@/apis/userApi"
import {findAllRole} from "@/apis/roleApi"
// 表头数据
const columns = [
  {
    title: '用户名字',
    dataIndex: 'account'
  },
  {
    title: '邮箱地址',
    dataIndex: 'email'
  },
  {
    title: '角色',
    dataIndex: 'role',
    render: (role) => {
      if (role) {
        return role.name
      } else {
        return "暂无数据"
      }

    }
  },
  {
    title: '操作',
    width: "140px",
    render: (text) => {
      return (
        <span>
          <Button type="dashed">删除</Button>
        </span>
      )
    }
  }
];
const Option = Select.Option;
// 表单样式
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

export default function User() {
  const [users, setUsers] = useState([])
  const [roles,setRoles] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false);
 
  useEffect(()=>{
    fetchData()
  },[])
  const fetchData =async ()=>{
    const res = await findAllUser()
    console.log(res);
    setUsers(res.data.data)
  }
  const onFinish =async (values)=>{
    console.log(values);
    const res = await addUserApi(values)
    console.log(res);
    if(res?.data?.code){
      message.success("添加成功")
      setIsModalVisible(false)
    }else{
      message.error(" 添加失败")
    }
  }
  const cancel = ()=>{
    setIsModalVisible(false)
  }
  const addUser =async ()=>{
    setIsModalVisible(true)
    const res = await findAllRole()
    setRoles(res.data.data)
  }
  const onTypeChange = (values)=>{
    // console.log(values.user.id);
    // console.log(und);
  }

  // const deleteUser = (id)=>{
  //   users = users.filter(item=>item.id==id)
  //   setUsers(res)
  // }

  const search = (
    <span>
      <Button onClick={addUser} type="primary">添加用户</Button>
    </span>
  )
  return (
    <div>
      <Card title={search} style={{ width: "100%" }}>
        <Table
          columns={columns}
          dataSource={users}
          bordered
          rowKey="_id"
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
          loading={false}
        />
      </Card>
      <Modal onCancel={cancel} title="添加用户" visible={isModalVisible}>
        <Form {...layout} name="control-hooks" onFinish={onFinish}>
          <Form.Item
            name="account"
            label="用户名字"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="password"
            label="用户密码"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="role"
            label="用户角色"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="分类类型"
              onChange={onTypeChange}
              allowClear
            >
              {roles.map(item=>{
                return <Option key={item._id} value={item._id}>{item.name}</Option>
              })}
            </Select>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
